﻿var JsonUtil = {
    GetUniqueItems: function (source_json_array, property_name) {
        var return_array = [];
        $.each(source_json_array, function (index, element) {
            if (return_array.indexOf(element[property_name]) == -1) {
                return_array.push(element[property_name]);
            }
        });
        return return_array;
    }
};
////////////////////////////////
function Chart() {
    this.title = "";
    this.type = "";
    this.datasource = {};
    this.datasource_key = "";
    this.data = [];
    this.datacolumns = { category: "", series: { name: "", data: "" } };
    this.y_axis = "";
    this.chart = {};
}
var obj = {};
Chart.prototype.GetChartObject = function () {
    var $this = this;

    $this.chart.title = { text: this.title };
    $this.chart.chart = { height: 250 };
  
    if($this.type!="")
        $this.chart.chart.type = $this.type;

    $this.chart.xAxis = {};
    var data = this.datasource;

    $.each(this.datasource, function (i, val) {
        if (val.key == $this.datasource_key) {
            $this.data = val.data;
        }
    });
    //
    $this.chart.xAxis.categories = [];
    $this.chart.xAxis.categories = JsonUtil.GetUniqueItems($this.data, $this.datacolumns.category);
    //
    obj.series_distinct_name = [];
    obj.series_distinct_name = JsonUtil.GetUniqueItems($this.data, $this.datacolumns.series.name);

    //
    $this.chart.series = [];
    $.each(obj.series_distinct_name, function (index, element) {
        var series_item = {};
        series_item.name = element;
        series_item.data = [];
        $.each($this.data, function (index, element) {
            if (element[$this.datacolumns.series.name] == series_item.name) {
                series_item.data.push(element[$this.datacolumns.series.data]);
            }
        });
        $this.chart.series.push(series_item);
    });
    //

    return $this.chart;
};
////////////////////////////
function ChartList() {
    this.charts = [];
}
ChartList.prototype.sayHello = function () {
    alert("Hello, I'm " + this.firstName);
};
////////////////////////////////////////////////////////////////////


var data = [
        { city: 'Tokyo', month: 'Jan', temp: 7.0 }, { city: 'Tokyo', month: 'Feb', temp: 6.9 }, { city: 'Tokyo', month: 'Mar', temp: 9.5 },
        { city: 'Tokyo', month: 'Apr', temp: 14.5 }, { city: 'Tokyo', month: 'May', temp: 18.2 }, { city: 'Tokyo', month: 'Jun', temp: 21.5 },
        { city: 'Tokyo', month: 'Jul', temp: 25.2 }, { city: 'Tokyo', month: 'Aug', temp: 26.5 }, { city: 'Tokyo', month: 'Sep', temp: 23.3 },
        { city: 'Tokyo', month: 'Oct', temp: 18.3 }, { city: 'Tokyo', month: 'Nov', temp: 13.9 }, { city: 'Tokyo', month: 'Dec', temp: 9.6 },
        { city: 'New York', month: 'Jan', temp: -0.2 }, { city: 'New York', month: 'Feb', temp: 0.8 }, { city: 'New York', month: 'Mar', temp: 5.7 },
        { city: 'New York', month: 'Apr', temp: 11.3 }, { city: 'New York', month: 'May', temp: 17.0 }, { city: 'New York', month: 'Jun', temp: 22.0 },
        { city: 'New York', month: 'Jul', temp: 24.8 }, { city: 'New York', month: 'Aug', temp: 24.1 }, { city: 'New York', month: 'Sep', temp: 20.1 },
        { city: 'New York', month: 'Oct', temp: 14.1 }, { city: 'New York', month: 'Nov', temp: 8.6 }, { city: 'New York', month: 'Dec', temp: 2.5 },
        { city: 'Berlin', month: 'Jan', temp: -0.9 }, { city: 'Berlin', month: 'Feb', temp: 0.6 }, { city: 'Berlin', month: 'Mar', temp: 3.5 },
        { city: 'Berlin', month: 'Apr', temp: 8.4 }, { city: 'Berlin', month: 'May', temp: 13.5 }, { city: 'Berlin', month: 'Jun', temp: 17.0 },
        { city: 'Berlin', month: 'Jul', temp: 18.6 }, { city: 'Berlin', month: 'Nov', temp: 17.9 }, { city: 'Berlin', month: 'Sep', temp: 14.3 },
        { city: 'Berlin', month: 'Oct', temp: 9.0 }, { city: 'Berlin', month: 'Aug', temp: 3.9 }, { city: 'Berlin', month: 'Dec', temp: 1.0 },
        { city: 'London', month: 'Jan', temp: 3.9 }, { city: 'London', month: 'Feb', temp: 4.2 }, { city: 'London', month: 'Mar', temp: 5.7 },
        { city: 'London', month: 'Apr', temp: 8.5 }, { city: 'London', month: 'May', temp: 11.9 }, { city: 'London', month: 'Jun', temp: 15.2 },
        { city: 'London', month: 'Jul', temp: 17.0 }, { city: 'London', month: 'Aug', temp: 16.6 }, { city: 'London', month: 'Sep', temp: 14.2 },
        { city: 'London', month: 'Oct', temp: 10.3 }, { city: 'London', month: 'Nov', temp: 6.6 }, { city: 'London', month: 'Dec', temp: 4.8 }
]
;
var _ds = [];
_ds.push({ key: "ds1", data: data });

var _chart_list = new ChartList();
//
var chart1 = new Chart();
chart1.title = "Chart1";
chart1.datacolumns.category = "month";
chart1.datacolumns.series.name = "city";
chart1.datacolumns.series.data = "temp";
chart1.datasource = _ds;
chart1.datasource_key = "ds1";
_chart_list.charts.push(chart1);

chart1.GetChartObject();
$(function () {
    $('#div2').highcharts(chart1.GetChartObject());
    chart1.title = "Chart3";
    chart1.type = "column";
    $('#div3').highcharts(chart1.GetChartObject());   
    chart1.title = "Chart4";
    $('#div4').highcharts(chart1.GetChartObject());
    $('#Div1').highcharts(chart1.GetChartObject());
});

//
//name: 'Tokyo',
//    data: [7.0, 6.9, 9.5,     14.5, 18.2, 21.5,   25.2, 26.5, 23.3,   18.3, 13.9, 9.6]
//}, {
//    name: 'New York',
//    data: [-0.2, 0.8, 5.7,    11.3, 17.0, 22.0,   24.8, 24.1, 20.1,   14.1, 8.6, 2.5]
//}, {
//name: 'Berlin',
//    data: [-0.9, 0.6, 3.5,    8.4, 13.5, 17.0,    18.6, 17.9, 14.3,   9.0, 3.9, 1.0]
//}, {
//    name: 'London',
//    data: [3.9, 4.2, 5.7,     8.5, 11.9, 15.2,     17.0, 16.6, 14.2,     10.3, 6.6, 4.8]